@(geneIds: Option[String])(implicit request: RequestHeader)
@user.main("ROC曲线")("roc") {
	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa-line-chart"></i>
					<a href="#">ROC曲线</a>
				</li>
			</ul>
		</div>


		<div class="row-fluid">

			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet green-jungle box">
						<div class="portlet-title">
							<div class="caption">
								设置参数
							</div>
						</div>

						<div class="portlet-body">

							<form class="registration-form form-horizontal" id="form"
							accept-charset="UTF-8" method="post">

								<div class="form-group">
									<label class="control-label col-sm-2">代谢物:</label>
									<div class="col-sm-6">
										@if(geneIds.isDefined) {
											<textarea name="geneIdStr" id="geneIdStr" class="form-control" rows="10">@geneIds.get</textarea>
										} else {
											<textarea name="geneIdStr" id="geneIdStr" class="form-control" rows="10"></textarea>
										}
										<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egGene">
											example</em></a></span>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">分组策略 <a href="@routes.MetaboliteController.groupBefore()" target="_blank"><i style="color: black"  class="fa fa-eye"></i></a> :</label>
									<div class="col-sm-3">
										<select class="form-control groupingName" name="groupingName" id="groupingName" onchange="gChange(this)">

										</select>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">"positive" event:</label>
									<div class="col-sm-3">
										<select class="form-control pGroup" name="pGroup" id="pGroup" >

										</select>
									</div>
								</div>

								<div class="form-group">
									<div class="actions col-sm-offset-2 col-sm-2">
										<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
											运行</button>
									</div>
								</div>

							</form>

						</div>
					</div>
				</div>
			</div>

			<div id="result" style="display: none">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet green-jungle box">
						<div class="portlet-title">
							<div class="caption">
								ROC曲线图
							</div>
							<div class="tools">
								<a href="javascript:;" class="collapse">
								</a>
							</div>
						</div>

						<div class="portlet-body">
							<div id="charts" align="center">没有图片结果生成！</div>
						</div>
					</div>
				</div>
			</div>
			</div>

		</div>

	</div>


	<script>
			$(function () {

				$('#egGene').click(function () {
					$.ajax({
						url: "@routes.MetaboliteController.getFirst10GeneIdByLf()",

						type: "get",
						success: function (data) {
							$('#geneIdStr').val(data);
							$("#form").bootstrapValidator("revalidateField", "geneIdStr")
							return false
						}
					})
				});

				$.ajax({
					url: "@routes.MetaboliteController.getAllGroupNames()",

					type: "get",
					success: function (data) {
						$(".groupingName").select2({
							data: data,
							minimumResultsForSearch: -1
						})
						$("#groupingName").trigger("change")
					}
				})

				$.ajax({
					url: "@routes.MetaboliteController.getGeneIds()",

					type: "get",
					success: function (data) {
						$(".geneId").select2(
								{
									data: data.geneIds,
									allowClear: true,
									placeholder: "点击选择",
								}
						);
					}
				})

				$.ajax({
					url: "@routes.MetaboliteController.getGeneIds()",

					type: "get",
					success: function (data) {
						$('#geneIdStr').typeahead({
							source: data.geneIds,
							updater: function (item) {
								return this.$element.val().replace(matcherRegex, '') + item + matcherEnd;
							},
							matcher: function (item) {
								var tquery = extractor(this.query);
								if (!tquery) return false;
								return ~item.toLowerCase().indexOf(tquery.toLowerCase())
							},
							highlighter: function (item) {
								var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
								return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
									return '<strong>' + match + '</strong>'
								})
							}
						})
					}
				})

				bootstrapValidator()
			})

			function gChange(element) {
				var value = $(element).find(">option:selected").val()
				$.ajax({
					url: "@routes.MetaboliteController.getGroupNames()",

					type: "get",
					data:{
					    "groupingName":value
					},
					success: function (data) {
						$("#pGroup").empty()
						$.each(data, function (i, v) {
							var html = "<option value=" + v + ">" + v + "</option>"
							$("#pGroup").append(html);
						})
					}
				})

			}

			function mySearch() {
				var form = $("#form")
				var fv = form.data("bootstrapValidator")
				fv.validate()
				if (fv.isValid()) {
					var element = "<div id='content'><span id='info'>"+zhRunning+"</span>&nbsp;<img class='runningImage' src='@routes.Assets.at("images/running2.gif")' style='width: 30px;height: 20px;'></div>"
					var index = layer.alert(element, {
						skin: 'layui-layer-molv'
						, closeBtn: 0,
						title: zhInfo,
						btn: []
					});

					$.ajax({
						url: "@routes.MetaboliteController.roc()",
						type: "post",
						data: $("#form").serialize(),

						success: function (data) {
							layer.close(index)
							if (data.valid == "false") {
								$("#charts").html("没有图片结果生成！")
								swal("Error", data.message, "error")
								$("#result").hide()
							} else {
								$("#charts").html(data.div)
								$("#result").show()
							}
						}
					});
				}

			}

			function bootstrapValidator() {
				var infinityNumber = Number.MAX_VALUE
				$('#form').bootstrapValidator({
					framework: 'bootstrap',
					icon: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						geneIdStr: {
							validators: {
								notEmpty: {
									message: '蛋白ID不能为空！'
								},
							}
						},
						groupingName:{
							validators: {
								callback: {
									message: '请至少选择一个分组策略！',
									callback: function (value, validator, $field) {
										var options = validator.getFieldElements('groupingName').val();
										return (options != null);
									}
								}
							}
						},
					}
				})
			}

	</script>

}